<template>
  <div class="login_page" id="login_page">
    <div class="login_banner">
    </div>
    <div class="login_title">
      <span v-if="TYPE == 0 && !token"> {{ $t("login.title") }}.</span>
      <span v-if="TYPE == 1 && !token"> {{ $t("login.register") }}</span>
      <span v-if="TYPE == 2 && !token"> {{ $t("login.forgot") }}</span>
      <span v-if="token"> {{ $t("login.setpwd") }}</span>
    </div>


    <div class="send_tips" v-if="TYPE == 4">
      {{ $t("login.setpwd_title") }}
    </div>
    <div v-if="!token">
      <div class="login_from">
        <!-- 邮箱 -->
        <div>
          <span class="require_icon" v-if="TYPE == 1">*</span>
          <el-input :placeholder="$t('login.email')" size="large" clearable v-if="TYPE != 3 && TYPE != 4"
            v-model="ParmasData.username">
            <template #suffix>
              <el-icon>
                <ChatLineSquare />
              </el-icon>
            </template>
          </el-input>
        </div>

        <!-- 手机注册 -->
        <el-input :placeholder="$t('login.mobile')" size="large" type="tel" maxlength="11" clearable v-if="TYPE == 1"
          v-model="ParmasData.mobile">
          <template #suffix>
            <el-icon>
              <Iphone />
            </el-icon>
          </template>
        </el-input>
        <!-- 密码 注册登录 -->
        <div>
          <span class="require_icon" v-if="TYPE == 1">*</span>
          <el-input :placeholder="$t('login.password')" type="password" size="large" clearable
            v-if="TYPE == 0 || TYPE == 1" v-model="ParmasData.password">
            <template #suffix>
              <el-icon>
                <Hide />
              </el-icon>
            </template>
          </el-input>
        </div>

        <!-- 再次确认密码 注册-->
        <div>
          <span class="require_icon" v-if="TYPE == 1">*</span>
          <el-input :placeholder="$t('login.comfir_pwd')" type="password" size="large" clearable v-if="TYPE == 1"
            v-model="ParmasData.passwordComfir">
            <template #suffix>
              <el-icon>
                <Hide />
              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 设定新密码 -->
    <div v-if="token" style="padding:0 16px;">

      <el-input :placeholder="$t('login.new_pwd')" type="password" size="large" clearable v-model="restParams.password">
        <template #suffix>
          <el-icon>
            <Hide />
          </el-icon>
        </template>
      </el-input>
      <p class="tips">{{ $t("login.pwd_rule") }}</p>
      <el-input :placeholder="$t('login.comfir_pwd')" type="password" size="large" clearable
        v-model="restParams.confirmPassword">
        <template #suffix>
          <el-icon>
            <Hide />
          </el-icon>
        </template>
      </el-input>
    </div>


    <div class="forget" @click="TYPE = 2" v-if="TYPE == 0 && !token">
      {{ $t('login.forgot') }}?
    </div>

    <div class="agree" v-if="TYPE == 1">
      <div class="agree_item">
        <w-checkbox v-model="ParmasData.isWhatsApp">{{ $t('login.agree_1') }}</w-checkbox>
      </div>
      <div class="agree_item">
        <w-checkbox v-model="ParmasData.isSms">{{ $t('login.agree_3') }}</w-checkbox>
      </div>
      <div class="agree_item">
        <w-checkbox v-model="ParmasData.agree">{{ $t('login.agree_2') }} {{ $t('login.server') }}</w-checkbox>
      </div>
    </div>

    <div class="login_from login_btn">
      <!-- 登录 -->
      <w-button v-if="TYPE == 0 && !token" @click="handleLogin"> {{ $t('login.title') }}</w-button>
      <!-- 注册 -->
      <w-button v-if="TYPE == 1 && !token" @click="handleReister"> {{ $t('login.register') }}</w-button>
      <!-- 忘记密码提交 -->
      <w-button v-if="TYPE == 2 && !token" @click="handleSendEmail"> {{ $t('login.sub') }}</w-button>
      <!-- 提交后确认 -->
      <w-button v-if="TYPE == 4 && !token" @click="TYPE = 0"> {{ $t('login.comfir') }}</w-button>
      <!-- 设定新密码 -->
      <w-button v-if="token" @click="handleRestPwd"> {{ $t('login.comfir_update') }}</w-button>
    </div>

    <div class="divider" v-if="(TYPE == 0 || TYPE == 1) && !token">
      <el-divider content-position="center">
        <span v-if="TYPE == 0"> {{ $t('login.tips') }}</span>
        <span v-if="TYPE == 1 && !token"> {{ $t('login.tips2') }}</span>
      </el-divider>
    </div>

    <div class="login_type" v-if="(TYPE == 0 || TYPE == 1) && !token">
      <div class="type_item">
        <!-- <GoogleLogin :callback="callback" prompt> -->
        <SvgIcon name="google" />
        <!-- </GoogleLogin> -->
      </div>
      <div class="type_item Facebook" @click="handleLoginFacebook">
        <SvgIcon name="face" />
      </div>
    </div>

    <div class="footer">
      <span v-if="TYPE == 0 && !token">{{ $t('login.noaccount') }}? <span style="color:rgba(54, 133, 255, 1)"
          @click="TYPE = 1">{{
            $t('login.register') }}</span></span>
      <span v-if="TYPE != 0 || token">{{ $t('login.haveaccount') }}? <span style="color:rgba(54, 133, 255, 1)"
          @click="handleGoLogin">{{
            $t('login.title') }}</span></span>



    </div>
  </div>
</template>

<script>

import { defineComponent, onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { userRegister, userLogin, sendValidationEmail, resetPassword } from '@/api/login'
import { ElMessage } from "element-plus";
import storage from '@/utils/storage.js'
import { useI18n } from "vue-i18n";
export default defineComponent({
  props: {},
  components: {
  },
  setup() {

    const { t } = useI18n()

    const TYPE = ref(0) //0登录 1注册 2忘记密码 3设定新密码

    const router = useRouter()
    const route = useRoute()

    const token = ref(route.query.token)

    const ParmasData = reactive({
      isSms: false,//是否签约 Sm
      isWhatsApp: false,
      mobile: '',
      password: '',
      username: '',
      passwordComfir: '',
      agree: false
    })

    // 注册
    const handleReister = async () => {
      if (!ParmasData.agree) {
        ElMessage({ type: 'error', message: t('error.tips1') })
        return
      }
      if (!ParmasData.username) {
        ElMessage({ type: 'error', message: t('error.tips2') })
        return
      }
      if (!ParmasData.password) {
        ElMessage({ type: 'error', message: t('error.tips3') })
        return
      }
      if (ParmasData.password !== ParmasData.passwordComfir) {
        ElMessage({ type: 'error', message: t('error.tips4') })
        return
      }
      const data = { ...ParmasData }
      data.isSms ? data.isSms = 1 : data.isSms = 0
      data.isWhatsApp ? data.isWhatsApp = 1 : data.isWhatsApp = 0
      delete data.agree
      delete data.passwordComfir
      const res = await userRegister(data)
      console.log(res, 'xxx')
      if (res) {
        router.push({
          path: '/registerSucc',
          query: {
            email: data.username
          }
        })
      }
    }
    // 登录
    const handleLogin = async () => {
      if (!ParmasData.username) {
        ElMessage({ type: 'error', message: t('error.tips5') })
        return
      }
      const res = await userLogin({
        username: ParmasData.username,
        password: ParmasData.password
      })
      if (res) {
        storage.setStorage('token', res.token)
        if (route.query.path) {
          router.push(route.query.path)
        } else {
          router.push('/home')
        }
      }
    }
    // 忘记密码发送邮件
    const handleSendEmail = async () => {
      const res = await sendValidationEmail({ email: ParmasData.username, type: 0 })
      if (res) {
        TYPE.value = 4
      }
    }
    // 设定新密码
    const restParams = reactive({
      password: '',
      passwordComfir: ''
    })
    const handleRestPwd = async () => {
      const res = await resetPassword({
        token: route.query.token,
        password: restParams.password,
        confirmPassword: restParams.confirmPassword
      })
    }






    function callback(response) {
      console.log("Handle the response", response)
    }



    const handleGoLogin = () => {
      TYPE.value = 0
      window.location.search = ''
      token.value = null
    }

    const handleLoginFacebook = () => {
      console.log(FB, 'xx')
      FB.login((res) => {
        console.log(res, 'xx')
        alert(res.status)
        if (res.status === 'connected') {
          // Logged into your webpage and Facebook.
        } else {
          // The person is not logged into your webpage or we are unable to tell. 
        }
      }, { scope: 'public_profile,email' })

    }


    return {
      token,
      TYPE,
      handleReister,
      handleLogin,
      callback,
      ParmasData,
      handleSendEmail,
      handleRestPwd,
      restParams,
      handleGoLogin,
      handleLoginFacebook
    };
  },
});
</script>

<style scoped lang="scss">
.login_page {
  .login_banner {
    width: 100%;
    height: 198px;
    background-image: url('../../assets/login.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .login_title {
    margin: 17px;

    span {
      font-size: 24px;
    }
  }

  .send_tips {
    margin: 17px;
    color: #333;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    font-family: Helvetica;
    font-size: 16px;
  }

  .login_from {
    margin: 0 17px;

    .require_icon {
      color: red;
    }

    .el-input {
      margin-bottom: 12px;
    }
  }

  .forget {
    margin: 0 17px;
    font-size: 12px;
    color: #3685FF;
  }

  .login_btn {
    margin-top: 54px;
    height: 48px;
    flex-shrink: 0;

    button {
      width: 100%;
      color: 16px;
    }
  }

  .divider {
    margin: 0 17px;
    font-size: 12px;

    span {
      font-size: 12px;
      color: #999999;
    }
  }

  .agree {
    margin: 0 17px;

  }

  .login_type {
    margin: 0 17px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .type_item {
      margin: 0 4.5px;
      line-height: 48px;
      text-align: center;
      border-radius: 5px;
      font-weight: bold;
      border: 1px solid rgba(0, 0, 0, 0.08);
      font-size: 14px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 167px;
      height: 48px;
      flex-shrink: 0;

      svg {
        width: 100px;
        height: 30px;
      }

      // img {
      //   width: 20px;
      //   height: 20px;
      //   margin-right: 5px;
      // }

    }

    .Facebook {
      color: #fff;
      background: rgba(96, 124, 196, 1);

    }
  }

  .footer {
    text-align: center;
    margin-top: 50px;
    color: #666;
    font-family: Helvetica;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;

  }
}

.g-btn-wrapper {

  svg {
    margin-top: 20px;
  }
}

.tips {
  color: #666;
  font-family: Helvetica;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
  margin-top: 12px;
}
</style>
